import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import toNative from '@/utils/toNative'
import Dialog from '@/components/dialog/Index'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import RenderDescription, { type DescItemDto } from '@/components/render-descriotion/Index'
import { VxeGrid, type VxeColumnSlotTypes } from 'vxe-table'
import type { ReportCaseResultDto } from '@/api/insurance/period/types'
import type { InsureEnsureFormData } from '../Index'
import type { AnyObject } from '@/types'
import { Button } from 'ant-design-vue'
import { InsurePlanTypeCnEnum, OccupationLevelCnEnum } from '@/const/enum'
import { addInsureEnsurePlan } from '@/api/insureEnsurePlan'
import type { InsureEnsurePlanDto } from '@/api/insureEnsurePlan/types'

type DoneType = 'toDetail' | 'toList' | 'toAdd'

@Component
export class DialogPreview extends TableRender {
    @Prop() formData!: InsureEnsureFormData
    @Prop() show!: boolean

    showDialog = false

    isSubmit = false
    
    detailId = null as null | number

    @Emit('update:show')
    emitShow(val: boolean) {
        return val
    }

    @Emit('refresh')
    handleRefresh() {}

    @Emit('reset')
    handleReset() {}

    @Watch('show', { immediate: true })
    async handleWatchShow() {
        this.showDialog = this.show
        if (this.show) {
            console.log('formData', this.formData)
        }
    }

    @Watch('showDialog', { immediate: true })
    handleWatchDialogShow() {
        this.emitShow(this.showDialog)
    }

    get systemInfoData() {
        return [
            {
                label: '方案名称',
                value: this.formData.basicInfoView?.planName
            },
            {
                label: '保单类型',
                value:  InsurePlanTypeCnEnum[this.formData.basicInfoView?.insurePlanType]
            },
            {
                label: '关联保司',
                value: this.formData.basicInfoView?.insureCompanyName
            },
            {
                label: '生效时间',
                value: this.formData.supplementaryInfo?.planStartTime
            },
            {
                label: '结束时间',
                value: this.formData.supplementaryInfo?.planEndTime
            }
        ] as DescItemDto[]
    }

    tableColumnConfigOld = () =>
        [
            {
                field: 'dangerLevel',
                title: '风险等级',
                slots: {
                    default: ({ row, column }: VxeColumnSlotTypes.ContentSlotParams) => {
                        return <div>{OccupationLevelCnEnum[row.dangerLevel]}</div>
                    }
                }
            },
            {
                field: 'monthFee',
                slots: {
                    header: () => {
                        return (
                            <>
                                <div>成本保费</div>
                                <div class="text-black-300 text-sm">(元/月)</div>
                            </>
                        )
                    }
                }
            },
            {
                field: 'dailyFee',
                slots: {
                    header: () => {
                        return (
                            <div class="py-10">
                                <div>日保费</div>
                                <div class="text-black-300 text-sm">(元/日)</div>
                            </div>
                        )
                    }
                }
            }
        ] as TableRenderColumnTypes<ReportCaseResultDto>

    async onSubmit() {
        const params = {
            ...this.formData.basicInfoView,
            ...this.formData.insurancePriceView,
            ...this.formData.supplementaryInfo
        } as InsureEnsurePlanDto

        console.log(1111, params)
        const res = await addInsureEnsurePlan(params)

        this.detailId = res

        this.isSubmit = true
    }

    onDone(type: DoneType) {
        switch(type) {
        case 'toDetail':
            this.$router.push({
                path: `insurance-manage/insurance-product/${this.detailId}`
            })
            break
        case 'toList':
            this.$router.back()
            break
        case 'toAdd':
            this.handleReset()
            this.showDialog = false
            break
        }
    }

    render() {
        return (
            <Dialog
                v-model:show={this.showDialog}
                title="工种审核"
                width={800}
                hideCancel={true}
                v-slots={{
                    default: () => {
                        return (
                            <>
                                <RenderDescription
                                    renderData={this.systemInfoData}
                                    row={2}
                                    size="middle"
                                />
                                <div class="mt-20px">
                                    <VxeGrid columns={[...this.tableColumnConfigOld()]} data={this.formData.insurancePriceView.ensureFeeLevel}></VxeGrid>
                                </div>
                            </>
                        )
                    },
                    footer: () => {
                        return (
                            <div class="flex justify-center">
                                {
                                    this.isSubmit ? (
                                        <>
                                            <Button type="primary" onClick={() => this.onDone('toDetail')}>
                                            完成
                                            </Button>
                                            <Button type="primary" onClick={() => this.onDone('toList')}>
                                            完成，返回列表
                                            </Button>
                                            <Button type="primary" onClick={() => this.onDone('toAdd')}>
                                            完成，继续添加
                                            </Button>
                                        </>
                                    ) : (
                                        <Button type="primary" onClick={this.onSubmit}>
                                            提交
                                        </Button>
                                    )
                                }
                            </div>
                        )
                    }
                }}
            ></Dialog>
        )
    }
}

export default toNative<{ formData: InsureEnsureFormData }, {reset: ()=>void}>(DialogPreview)
